import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import Banner from './component/Banner';
import List from './component/List';
import Recommend from './component/Recommend';
import Topics from './component/Topics';
import Writer from './component/Writer';
import {HomeWrapper, HomeLeft, HomeRight, BackTop} from './styled';
import { actionTypes } from './store';


class Home extends PureComponent{
	handleScrollTop() {
		window.scrollTo(0, 0);
	}
	render() {
		return(
			<Fragment>
				<HomeWrapper>
					<HomeLeft>
						<Banner />
						<Topics />
						<List />
					</HomeLeft>
					<HomeRight>
						<Recommend />
						<Writer />
					</HomeRight>
					{this.props.scrollTo ? <BackTop onClick={this.handleScrollTop}>返回</BackTop> : ''}
				</HomeWrapper>
			</Fragment>	
		)
	}

componentDidMount() {
	this.props.changeHomeData();
	this.bandEvents();
}
bandEvents() {
	window.addEventListener('scroll', this.props.changeScroll)
}

componentWillUnmount() {
	window.removeEventListener('scroll', this.props.changeScroll)
}

}

const mapState = (state) => ({
	scrollTo: state.getIn(['home', 'ScrollShow'])
})

const mapDispatch = (dispatch) => ({
	changeHomeData() {
		dispatch(actionTypes.getHomeInfo());
	},
	changeScroll(){
		if(document.documentElement.scrollTop > 100){
			dispatch(actionTypes.getScroll(true))
		}else{
			dispatch(actionTypes.getScroll(false))
		}
	}
})

export default connect(mapState, mapDispatch)(Home);